<template>
	<view>
		<view class="querenyundan">
			<view class="xuanzheyundan">
				<view style="float: left;width: 45%;line-height: 88upx;margin-left: 5%;">
					<text style="color: red;">*</text>装货时间
				</view>
				<view @click="show_time=true" style="float: left;width: 48%;text-align: right; line-height: 88upx;">
					{{appointment_date}}
					<image src="../../static/fhy.png"
						style="width: 30upx; height: 30upx;float: right;margin-top: 30upx;" />
				</view>
			</view>
			<view class="xinsta">
				<view class="ddnriong">
					<view class="ttlias">
						<view style="float: left;width: 50%; font-size: 28upx;line-height: 82upx;" class="fz28 col333 bold">用车信息</view>
						<view style="float: left;width: 50%; font-size: 24upx;line-height: 82upx;text-align: right;">
							{{carInfo.title}}·{{carInfo.length}}米
						</view>
					</view>

					<view class="zhuangxie">
						<view class="dinwx">
							<view class="z">装</view>
							<view class="shuru">
								<view style="font-size: 28upx;">{{receiveAddress.mapAddress}}</view>
								<view style="font-size: 24upx;" class="col777 pt-12">{{receiveAddress.mapAddressDetail}}
								</view>
							</view>
						</view>
						<view v-for="(item,index) in deliveAddress" class="dinwx">
							<view class="x">卸</view>
							<view class="shuru">
								<view style="font-size: 28upx;">{{item.mapAddress}}</view>
								<view style="font-size: 24upx;" class="col777 pt-12">{{item.mapAddressDetail}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="xintablist">
				<view class="ddnriong">
					<view class="ttlias">
						<view class="fz28 col333 bold" style="float: left;width: 50%; font-size: 28upx;line-height: 82upx;">货物信息</view>

					</view>
					<view class="xuanzheyundan">
						<view style="float: left;width: 50%;line-height: 60upx;height: 60upx;">
							<text style="color: red;">*</text>货物类型
						</view>
						<view style="float: left;width: 50%;text-align: right; line-height: 88upx; height: 60upx;">
							<input v-model="form.remarks.goods_type" style="width: 100%; height: 100%;float: left;"
								placeholder="请输入类型" />
						</view>
					</view>
					<view class="xuanzheyundan">
						<view style="float: left;width: 50%;line-height: 60upx;height: 60upx;">
							<text style="color: red;">*</text>包装方式
						</view>

					</view>
					<view v-for="(item,index) in bz" @click="bnum=index" :class="bnum==index?'act-list':''"
						class="tabsnnlisa">{{item}}
					</view>
					<view class="zhongliang">
						<view style="float: left;width: 30%;line-height: 60upx;height: 60upx;">
							<text style="color: red;">*</text>重量(吨)
						</view>
						<view
							style="border-radius:8upx;float: left;width: 70%;text-align: center; line-height: 60upx; height: 60upx;background: #F6F6F6;color: #AAAAAA;">
							<input v-model="form.remarks.weight"
								style="width: 100%; height: 100%;float: left;font-size: 26upx;" placeholder="约1-999" />
						</view>
					</view>
					<view class="zhongliang">
						<view style="float: left;width: 30%;line-height: 60upx;height: 60upx;">
							<text style="color: red;">*</text>体积(立方)
						</view>
						<view
							style="border-radius:8upx;float: left;width: 70%;text-align: center; line-height: 60upx; height: 60upx;background: #F6F6F6;color: #AAAAAA;">
							<input v-model="form.remarks.volu"
								style="width: 100%; height: 100%;float: left;font-size: 26upx;" placeholder="约1-999" />
						</view>
					</view>
					<view class="zhongliang">
						<view style="float: left;width: 30%;line-height: 60upx;height: 60upx;">
							备注
						</view>

					</view>
					<view class="stbz">
						<textarea v-model="form.remarks.remarks" placeholder="请输入备注"></textarea>
					</view>

				</view>
			</view>
			<view class="xuanzshut">
				<view class="ddnriong">
					<view class="ttlias">
						<view class="fz28 col333 bold" style="float: left;width: 50%; font-size: 28upx;line-height: 82upx;">订单信息</view>

					</view>
					<view class="xuanzheyundan">
						<view style="float: left;width: 50%;line-height: 60upx;height: 60upx;">
							跟车人数
						</view>
						<view style="float: left;width: 50%;text-align: right; line-height: 88upx; height: 60upx;">
							<input v-model="form.remarks.followingNumber"
								style="width: 100%; height: 100%;float: left;font-size: 26upx;" placeholder="请输入跟车人数" />
						</view>
						<view style="float: left;width: 50%;line-height: 60upx;height: 60upx;">
							<text style="color: red;">*</text>联系电话
						</view>
						<view style="float: left;width: 50%;text-align: right; line-height: 88upx; height: 60upx;">
							<input v-model="form.remarks.followphone"
								style="width: 100%; height: 100%;float: left;font-size: 26upx;" placeholder="请输入联系电话" />
						</view>
						<view style="float: left;width: 50%;line-height: 60upx;height: 60upx;">
							<text style="color: red;"></text>支付方式
						</view>
						<view @click="showType=true"
							style="float: left;width: 50%; font-size: 24upx;line-height: 82upx;text-align: right; ">
							{{pay_type_text[form.pay_type]}}支付<image src="../../static/fhy.png"
								style="width: 30upx;height: 30upx;float: right;margin-top: 28upx;"></image>
						</view>
						<view style="float: left;width: 50%;line-height: 60upx;height: 60upx;">
							<text style="color: red;"></text>优惠券
						</view>
						<view v-if="userInfo.coupon_ncount==0"
							style="float: left;width: 50%; font-size: 24upx;line-height: 82upx;text-align: right; ">
							暂无可用优惠券<image src="../../static/fhy.png"
								style="width: 30upx;height: 30upx;float: right;margin-top: 28upx;"></image>
						</view>
						<view v-else @click="$go('newcoupon/index?is_use=1')"
							style="float: left;width: 50%; font-size: 24upx;line-height: 82upx;text-align: right; ">
							{{couponInfo.id?couponInfo.name:"选择优惠券"}}
							<image src="../../static/fhy.png"
								style="width: 30upx;height: 30upx;float: right;margin-top: 28upx;"></image>
						</view>
						<view style="float: left;width: 50%;line-height: 60upx;height: 60upx;">
							<text style="color: red;"></text>购买保险
						</view>
						<view
							style="text-align: right;float: right;width:15%; font-size: 24upx;height: 60upx;line-height: 82upx;text-align: right; ">
							<u-switch v-model="bxval"></u-switch>
						</view>
						<block v-if="bxval">
							<view style="float: left;width: 50%;line-height: 60upx;height: 60upx;">
								<text style="color: red;"></text>货物估值
							</view>
							<view style="float: left;width: 50%;text-align: right; line-height: 88upx; height: 60upx;">
								<input v-model="form.remarks.goods_pirce"
									style="width: 100%; height: 100%;float: left;font-size: 26upx;"
									placeholder="请输入货物估值" />

							</view>


							<view style="float: left;width: 50%;line-height: 60upx;height: 60upx;">
								<text style="color: red;"></text>保险费
							</view>
							<view
								style="float: left;width: 50%; font-size: 24upx;line-height: 82upx;text-align: right; ">
								0元</view>
						</block>

						<view style="float: left;width: 50%;line-height: 60upx;height: 60upx;">
							<text style="color: red;"></text>实付总额
						</view>
						<view style="float: left;width: 50%; font-size: 24upx;line-height: 82upx;text-align: right; ">
							￥{{carPrice}}</view>
						<view style="float: left;width: 50%;line-height: 60upx;height: 60upx;">

						</view>
						<view style="float: left;width: 50%; font-size: 24upx;line-height: 82upx;text-align: right; ">
							（含保险费￥0.00)</view>
					</view>

				</view>
			</view>
		</view>
		<view style="position: fixed; bottom: 0; width: 100%; height: 132upx; background: #fff;">
			<view @click="submitOrder" class="btnaniu">下单找车</view>
		</view>
		<u-modal @cancel="showType=false" @confirm="com_paytype" :showCancelButton="true" :show="showType">
			<view style="width:100%;padding:50upx 30upx;">
				<view class="mb-30 bold tcenter" style="font-size:30upx;">支付类型</view>
				<view>
					<u-radio-group v-model="pay_type" placement="column">
						<u-radio :customStyle="{marginBottom: '8px'}" :label="3" :name="3">
							余额
						</u-radio>
						<u-radio :customStyle="{marginBottom: '8px'}" :label="1" :name="1">
							微信
						</u-radio>
						<u-radio :customStyle="{marginBottom: '8px'}" :label="2" :name="2">
							支付宝
						</u-radio>
					</u-radio-group>
				</view>
			</view>
		</u-modal>
		<u-datetime-picker @cancel="show_time=false" @confirm="appo_date" :show="show_time" v-model="appointment_time"
			mode="datetime"></u-datetime-picker>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				showType: false,
				bxval: false,
				carInfo: {},
				receiveAddress: {},
				deliveAddress: {},
				show_time: false,
				appointment_time: "",
				appointment_date: "",
				bz: ['袋装', '散装', '吨包', '纸箱', '桶装', '捆扎', '其他'],
				bnum: 0,
				carPrice: 0,
				pay_type_text:["","微信","支付宝","余额"],
				form: {
					pay_type:3,
					remarks: {
						weight: "",
						volu: "",
						goods_type: "",
						goods_pirce: "",
						followingNumber: "",
						followphone: ""
					}
				},
				userInfo: {},
				couponInfo: {},
				pay_type: 3
			}
		},
		onShow() {
			this.carInfo = this.$store.getters.carInfo;
			this.price_type = this.$store.getters.setPriceType;
			this.receiveAddress = this.$store.getters.receiveAddress;
			this.deliveAddress = this.$store.getters.deliveAddress;
			if (!this.receiveAddress.mapAddress || this.deliveAddress[0] == undefined) {
				this.$go("index/index");
				return;
			}
			this.couponInfo = this.$store.getters.couponInfo;
			//console.log(this.couponInfo,"=====couponInfo=====");
			this.carPrice = this.$store.getters.carPrice;
			this.appointment_date = this.$store.getters.appoTime;
			this.appointment_date = this.appointment_date ? this.appointment_date : "现在用车";
			this.getUserInfo();
		},
		methods: {
			com_paytype(){
				 this.showType=false;
				 this.form.pay_type=this.pay_type;
			},
			getUserInfo() {
				this.$api['post']('user/refresh-user').then(res => {
					if (res.code == 200) {
						this.userInfo = res.data;
					}
				});
			},
			appo_date(e) {
				this.appointment_date = this.$toDateTime(e.value);
				this.show_time = false;
			},
			submitOrder() {
				this.form.remarks.bz = this.bz[this.bnum];
				var price_type = this.$store.getters.setPriceType;
				price_type = price_type ? price_type : 0;
				//console.log(this.$store.getters.carCost,"====carCost===");
				var n = {
						delive:this.receiveAddress,
						receive:[this.deliveAddress[0]]
					},
					i = this.$store.getters.carCost,
					r = this.form,
					s = {
						phone:r.remarks.followphone,
						place: JSON.stringify(n),
						appointment_time: this.appointment_time?this.appointment_time:"现在用车",
						price: this.carPrice,
						distance: i.distance,
						vehicle_id: this.carInfo.id,
						//type: t,
						remarks: JSON.stringify(r),
						//have_back: this.have_back,
						//phone: this.phone,
						//invoice: this.invoice,
						user_coupon_id: this.couponInfo.id == undefined ? 0 : this.couponInfo.id,
						//appoint_driver: this.confrimChooseDriver.join(","),
						//freight: c.default.getters.orderType
						price_type: price_type,
						pay_type:this.form.pay_type
					};
				this.$api["post"]("order/create-order", s).then(e => {
					if (e.code == 200) {
						this.$store.commit("getReceive",{});
						this.$store.commit("getDelive",{});
						this.$store.commit("setCarPrice",0);
						if(price_type==0){
							this.$go("neworder/pay?orderid=" + e.data.id);
						}else{
							this.$go("tab/orderList");
						}
						
					} else {
						this.$toast({
							title: e.message
						})
					}

				});
			}
		}
	}
</script>

<style scoped lang="scss">
	/* 样式修改 */
	.querenyundan {
		width: 90%;
		float: left;
		margin-left: 5%;
		padding-bottom: 170upx;
	}

	.xuanzheyundan {
		width: 100%;
		height: 88upx;
		float: left;
		background: #fff;
		border-radius: 16upx;
		margin-top: 24upx;
	}

	.xinsta {
		width: 100%;
		height: 342upx;
		float: left;
		background: #fff;
		margin-top: 20upx;
		border-radius: 16upx;
	}

	.ddnriong {
		width: 90%;
		height: 100%;
		float: left;
		margin-left: 5%;
	}

	.ttlias {
		width: 100%;
		height: 82upx;
		float: left;
		border-bottom: 1upx solid#ccc;
	}

	.huoyuns {
		width: 100%;
		height: 44upx;
		float: left;
		margin-top: 30upx;
	}

	.hya {
		width: 72upx;
		height: 44upx;
		border-radius: 10upx;
		border: 1upx solid #0085FC;
		text-align: center;
		line-height: 44upx;
		color: #0085FC;
		font-size: 20upx;
		float: left;
	}

	.zhuangxie {
		width: 100%;
		height: 104upx;
		float: left;
		border-radius: 10upx;
	}

	.zhuangxiea {
		width: 100%;
		height: 414upx;
		float: left;
		background: #fff;
		margin-top: 40upx;
		border-radius: 10upx;
	}

	.dinwx {
		width: 90%;
		height: 122upx;
		float: left;
		margin-top: 10upx;
		margin-left: 5%;
	}

	.z {
		width: 44upx;
		height: 44upx;
		float: left;
		margin-top: 22upx;
		background: #0194fd;
		color: #fff;
		border-radius: 100upx;
		text-align: center;
		line-height: 44upx;
	}

	.x {
		width: 44upx;
		height: 44upx;
		float: left;
		margin-top: 22upx;
		background: #FF902A;
		color: #fff;
		border-radius: 100upx;
		text-align: center;
		line-height: 44upx;
	}

	.shuru {
		width: 85%;
		height: 122upx;
		border-radius: 10upx;
		float: left;
		margin-left: 16upx;
	}

	.shurk {
		width: 70%;
		height: 100%;
		float: left;
		margin-left: 16upx;
	}

	.dizpu {
		width: 25%;
		height: 40upx;
		float: left;
		border-left: 1upx solid #ccc;
		margin-top: 40upx;
		text-align: right;
		color: #777777;
	}

	.xintablist {
		width: 100%;
		height: 1054upx;
		float: left;
		margin-top: 20upx;
		background: #fff;
		border-radius: 16upx;
	}

	.xuanzshut {
		width: 100%;
		height: 820upx;
		float: left;
		margin-top: 20upx;
		background: #fff;
		border-radius: 16upx;
	}

	.tabsnnlis {
		width: 31%;
		height: 60upx;
		float: left;
		background: rgba(1, 149, 253, 0.1);
		border-radius: 8upx 8upx 8upx 8upx;
		opacity: 1;
		border: 2upx solid #0195FD;
		text-align: center;
		line-height: 60upx;
		color: #0195FD;
		margin-top: 20upx;
	}

	.tabsnnlisb {
		width: 31%;
		height: 60upx;
		float: left;
		background: #F6F6F6;
		border-radius: 8upx 8upx 8upx 8upx;
		opacity: 1;
		border: 2upx solid #F6F6F6;
		text-align: center;
		line-height: 60upx;
		color: #AAAAAA;
		margin-top: 20upx;
	}

	.tabsnnlisa {
		width: 30%;
		height: 60upx;
		float: left;
		background: #F6F6F6;
		border-radius: 8upx 8upx 8upx 8upx;
		opacity: 1;
		border: 2upx solid #F6F6F6;
		text-align: center;
		line-height: 60upx;
		color: #AAAAAA;
		margin-left: 3%;
		margin-top: 20upx;
	}

	.act-list {
		background: rgba(1, 149, 253, 0.1);
		border: 2upx solid #0195FD;
		color: #0195FD;
	}

	.zhongliang {
		width: 100%;
		height: 60upx;
		float: left;
		margin-top: 20upx;
	}

	.stbz {
		width: 98%;
		height: 240upx;
		padding: 24upx;
		float: left;
		background: #F6F6F6;
		border-radius: 8upx;
	}

	.btnaniu {
		width: 90%;
		height: 92upx;
		float: left;
		margin-left: 5%;
		text-align: center;
		line-height: 92upx;
		color: #fff;
		background: #0085FC;
		margin-top: 20upx;
		border-radius: 16upx;
	}
</style>